<template>
  <div class="mychart">
    <div>
      <a-input-search
        v-model:value="searchParam.name"
        placeholder="请输入图表名称"
        enter-button
        :loading="loading"
        @change="
          () => {
            searchParam.current = initParam.current;
            searchParam.pageSize = initParam.pageSize;
            loadData();
          }
        "
      />
    </div>
    <div class="margin-16"></div>
    <a-list
      :loading="loading"
      size="middle"
      :data-source="chartList"
      :grid="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 2 }"
      :gutter="16"
    >
      <template #renderItem="{ item }">
        <a-card style="margin: 16px">
          <a-list-item key="item.id">
            <template #extra></template>
            <a-list-item-meta
              :description="
                item.chartType ? '图表类型：' + item.chartType : undefined
              "
            >
              <template #title>
                <a>{{ item.name }}</a>
              </template>
              <template #avatar>
                <a-avatar :src="store.state['user'].loginUser.avatar" />
              </template>
            </a-list-item-meta>

            <div style="margin-bottom: 16px"></div>
            分析目标：{{ item.goal }}
            <div style="margin-bottom: 16px"></div>

            <div style="height: 350px; width: 100%">
              <ECharts
                ref="chart"
                :option="item.genChart ? JSON.parse(item.genChart) : {}"
              />
            </div>
          </a-list-item>
        </a-card>
      </template>
    </a-list>

    <a-pagination
      v-model:current="searchParam.current"
      v-model:page-size="searchParam.pageSize"
      :total="total"
      @change="onShowSizeChange"
      :show-total="(total) => `共 ${total} 条`"
    />
  </div>
</template>
<script setup lang="ts">
import { ChartControllerService, QueryChartDto } from "../../../generated";
import { onMounted, reactive, ref } from "vue";
import { message } from "ant-design-vue";
import store from "@/store";

const initParam = reactive({
  current: 1,
  pageSize: 10,
});
const searchParam = reactive<QueryChartDto>({ ...initParam });

const chartList = ref([]);
const total = ref<number>(0);
const loading = ref<boolean>(false);

onMounted(() => {
  loadData();
});

const onShowSizeChange = (current: number, pageSize: number) => {
  console.log(current, pageSize);
  loadData();
};

const loadData = async () => {
  loading.value = true;
  try {
    let response = await ChartControllerService.queryChartPageUsingPost(
      searchParam
    );
    if (response.code === 200) {
      response.data.rows.forEach((data: { genChart: string }) => {
        let obj = JSON.parse(data.genChart);
        obj.title = undefined;
        data.genChart = JSON.stringify(obj);
      });
      chartList.value = response.data.rows;
      total.value = parseInt(response.data.total);
    }
  } catch (e: any) {
    message.error("获取图表失败，" + e.message);
  }
  loading.value = false;
};
</script>

<style scoped></style>
